<template>
  <el-container class="page-container">
    <!-- 菜单导航 -->
    <el-aside width="200px">
      <CommonMenu :menuConfigs="menuConfigs" />
    </el-aside>
    <!-- 内容区 -->
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import CommonMenu from "@/components/CommonMenu/index.vue";

const menuConfigs = {
  mode: "vertical",
  backgroundColor: "#333",
  textColor: "#fff",
  activeTextColor: "#ffd04b",
  menuData: [
    { title: "模块一", path: "" },
    {
      title: "模块二",
      children: [
        { title: "模块1 列表", path: "/module_one/module1" },
        { title: "模块2 列表", path: "/module_one/module2" },
      ],
    },
    { title: "模块三", path: "" },
    { title: "模块四", path: "" },
    { title: "模块五", path: "" },
  ],
};
</script>

<style lang="scss" scoped>
.page-container {
  .el-aside {
    padding: 2px;
    margin-right: 4px;
    background: #000;
  }
  .el-main {
    padding: 10px;
    background: #fff;
  }
}
</style>